<template>
  <ContentWrap>
    <!-- 状态统计区 -->
    <el-card class="mb-4" shadow="never">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="status-item">
            <div class="status-label">
              <Icon :icon="statusConfig[currentStatus].icon" :color="statusConfig[currentStatus].color" class="mr-2" />
              当前状态
            </div>
            <div class="status-value" :style="{ color: statusConfig[currentStatus].color }">
              {{ statusConfig[currentStatus].text }}
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="status-item">
            <div class="status-label">
              <Icon icon="ep:wallet" class="mr-2" />
              账户余额
            </div>
            <div class="status-value">
              <span :class="accountBalance < 10 ? 'text-red-500' : ''">¥{{ accountBalance.toFixed(2) }}</span>
              <el-button type="primary" link class="ml-2" @click="handleRecharge">充值</el-button>
            </div>
            <div v-if="accountBalance < 10" class="status-warning">
              余额不足，请及时充值
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="status-item">
            <div class="status-label">
              <Icon icon="ep:data-analysis" class="mr-2" />
              今日通话统计
            </div>
            <div class="status-stats">
              <span>通话 <strong>{{ todayStats.total }}</strong> 次</span>
              <span class="ml-4">接通 <strong>{{ todayStats.connected }}</strong> 次</span>
              <span class="ml-4">接通率 <strong class="text-green-500">{{ todayStats.rate }}%</strong></span>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 标签切换 -->
    <el-card shadow="never">
      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <!-- 手动拨号 -->
        <el-tab-pane label="手动拨号" name="manual">
          <div class="manual-dial-container">
            <el-form :model="manualForm" label-width="100px" class="max-w-600px">
              <el-form-item label="手机号">
                <el-input
                  v-model="manualForm.phone"
                  placeholder="请输入11位手机号"
                  :maxlength="11"
                  :disabled="isDialing"
                  @input="handlePhoneInput"
                  clearable
                  class="w-full"
                >
                  <template #prepend>+86</template>
                </el-input>
                <div v-if="manualForm.displayPhone" class="mt-2 text-gray-500">
                  {{ manualForm.displayPhone }}
                </div>
                <div v-if="manualForm.contactName" class="mt-2 text-blue-500">
                  <Icon icon="ep:user" class="mr-1" />
                  {{ manualForm.contactName }}
                </div>
              </el-form-item>

              <el-form-item label="通话时长" v-if="isDialing && callDuration > 0">
                <div class="call-duration">{{ formattedCallDuration }}</div>
              </el-form-item>

              <el-form-item>
                <el-button
                  :type="isDialing ? 'danger' : 'primary'"
                  size="large"
                  :icon="isDialing ? 'PhoneFilled' : 'Phone'"
                  @click="handleManualDial"
                  :disabled="!canDial"
                  class="w-200px"
                >
                  {{ isDialing ? '挂断' : '拨打' }}
                </el-button>
                <div v-if="!canDial && manualForm.phone.length === 11" class="mt-2 text-red-500">
                  {{ dialDisabledReason }}
                </div>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>

        <!-- 批量拨号 -->
        <el-tab-pane label="批量拨号" name="batch">
          <div class="batch-dial-container">
            <el-row :gutter="24">
              <!-- 左侧：联系人选择 -->
              <el-col :span="12">
                <div class="contact-select-wrapper">
                  <div class="section-header">
                    <div class="section-title">
                      <Icon icon="ep:user" class="mr-2" />
                      <span>选择联系人</span>
                    </div>
                    <el-input
                      v-model="contactSearchKeyword"
                      placeholder="搜索姓名或手机号"
                      clearable
                      class="search-input"
                      prefix-icon="Search"
                    />
                  </div>

                  <div class="contact-stats">
                    <el-checkbox
                      v-model="selectAllContacts"
                      :indeterminate="isIndeterminate"
                      @change="handleSelectAll"
                      class="select-all-checkbox"
                    >
                      全选本页
                    </el-checkbox>
                    <div class="selected-count">
                      <span class="count-label">已选择：</span>
                      <span class="count-value">{{ selectedContacts.length }}</span>
                      <span class="count-unit">个联系人</span>
                    </div>
                  </div>

                  <div class="contact-list-container">
                    <el-scrollbar height="450px">
                      <el-checkbox-group v-model="selectedContacts" class="contact-checkbox-group">
                        <div
                          v-for="contact in filteredContacts"
                          :key="contact.id"
                          class="contact-card"
                          :class="{ 'contact-card-selected': selectedContacts.includes(contact.id) }"
                        >
                          <el-checkbox :value="contact.id" class="contact-checkbox">
                            <div class="contact-detail">
                              <div class="contact-avatar">
                                <Icon icon="ep:user-filled" />
                              </div>
                              <div class="contact-text">
                                <div class="contact-name">{{ contact.name }}</div>
                                <div class="contact-phone">
                                  <Icon icon="ep:phone" class="phone-icon" />
                                  {{ contact.phone }}
                                </div>
                              </div>
                            </div>
                          </el-checkbox>
                        </div>
                      </el-checkbox-group>
                      
                      <el-empty 
                        v-if="filteredContacts.length === 0" 
                        description="暂无联系人数据"
                        :image-size="100"
                      />
                    </el-scrollbar>
                  </div>
                </div>
              </el-col>

              <!-- 右侧：批量拨号控制 -->
              <el-col :span="12">
                <div class="batch-control-wrapper">
                  <div class="section-header mb-4">
                    <div class="section-title">
                      <Icon icon="ep:setting" class="mr-2" />
                      <span>批量拨号设置</span>
                    </div>
                  </div>

                  <!-- 拨号间隔 -->
                  <div class="control-section">
                    <div class="control-label">
                      <Icon icon="ep:timer" class="mr-2" />
                      拨号间隔
                    </div>
                    <el-select 
                      v-model="batchForm.interval" 
                      :disabled="batchStatus !== 'idle'" 
                      size="large"
                      class="w-full"
                    >
                      <el-option label="10秒" :value="10">
                        <span>10秒</span>
                        <span class="option-desc">（快速拨号）</span>
                      </el-option>
                      <el-option label="30秒" :value="30">
                        <span>30秒</span>
                        <span class="option-desc">（推荐）</span>
                      </el-option>
                      <el-option label="1分钟" :value="60">
                        <span>1分钟</span>
                        <span class="option-desc">（稳定拨号）</span>
                      </el-option>
                    </el-select>
                  </div>

                  <!-- 统计信息 -->
                  <div class="control-section">
                    <div class="stats-cards">
                      <div class="stat-card">
                        <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                          <Icon icon="ep:user" />
                        </div>
                        <div class="stat-content">
                          <div class="stat-value">{{ selectedContacts.length }}</div>
                          <div class="stat-label">已选联系人</div>
                        </div>
                      </div>
                      <div class="stat-card">
                        <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                          <Icon icon="ep:coin" />
                        </div>
                        <div class="stat-content">
                          <div class="stat-value">¥{{ (selectedContacts.length * 0.3).toFixed(2) }}</div>
                          <div class="stat-label">预估费用</div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 进度显示 -->
                  <div v-if="batchStatus !== 'idle'" class="control-section progress-section">
                    <div class="progress-header">
                      <span class="progress-title">拨号进度</span>
                      <span class="progress-count">{{ batchForm.dialedCount }} / {{ batchForm.totalCount }}</span>
                    </div>
                    <el-progress
                      :percentage="batchProgress"
                      :status="batchStatus === 'running' ? 'success' : 'warning'"
                      :stroke-width="12"
                      :show-text="true"
                    />
                    <div v-if="batchForm.currentContact" class="current-calling">
                      <Icon icon="ep:phone" class="calling-icon animate-pulse" />
                      <span class="calling-text">
                        正在拨号：<strong>{{ batchForm.currentContact.name }}</strong>
                        <span class="calling-phone">{{ batchForm.currentContact.phone }}</span>
                      </span>
                    </div>
                  </div>

                  <!-- 操作按钮 -->
                  <div class="control-section">
                    <div class="action-buttons">
                      <el-button
                        v-if="batchStatus === 'idle'"
                        type="success"
                        size="large"
                        @click="handleBatchStart"
                        :disabled="selectedContacts.length === 0 || accountBalance < selectedContacts.length * 0.3"
                        class="action-btn start-btn"
                      >
                        <Icon icon="ep:video-play" class="mr-2" />
                        开始批量拨号
                      </el-button>

                      <template v-if="batchStatus !== 'idle'">
                        <el-button
                          v-if="batchStatus === 'running'"
                          type="warning"
                          size="large"
                          @click="handleBatchPause"
                          class="action-btn"
                        >
                          <Icon icon="ep:video-pause" class="mr-2" />
                          暂停拨号
                        </el-button>

                        <el-button
                          v-if="batchStatus === 'paused'"
                          type="success"
                          size="large"
                          @click="handleBatchResume"
                          class="action-btn"
                        >
                          <Icon icon="ep:video-play" class="mr-2" />
                          继续拨号
                        </el-button>

                        <el-button
                          type="danger"
                          size="large"
                          @click="handleBatchStop"
                          class="action-btn stop-btn"
                        >
                          <Icon icon="ep:close" class="mr-2" />
                          终止拨号
                        </el-button>
                      </template>
                    </div>

                    <!-- 提示信息 -->
                    <div v-if="selectedContacts.length === 0" class="tip-message error-tip">
                      <Icon icon="ep:warning" class="mr-2" />
                      请先选择联系人
                    </div>
                    <div v-else-if="accountBalance < selectedContacts.length * 0.3" class="tip-message error-tip">
                      <Icon icon="ep:warning" class="mr-2" />
                      账户余额不足，请先充值
                    </div>
                    <div v-else-if="batchStatus === 'idle' && selectedContacts.length > 0" class="tip-message success-tip">
                      <Icon icon="ep:success-filled" class="mr-2" />
                      准备就绪，可以开始批量拨号
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </ContentWrap>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'

defineOptions({ name: 'CallcenterDial' })

// ========== 状态统计相关 ==========
type StatusType = 'idle' | 'dialing' | 'calling' | 'paused' | 'insufficient'

const currentStatus = ref<StatusType>('idle')
const accountBalance = ref(125.5) // 模拟账户余额
const todayStats = ref({
  total: 45,
  connected: 30,
  rate: 66.7
})

const statusConfig = {
  idle: { text: '空闲', icon: 'ep:circle-check', color: '#909399' },
  dialing: { text: '拨号中...', icon: 'ep:loading', color: '#409EFF' },
  calling: { text: '通话中...', icon: 'ep:phone', color: '#67C23A' },
  paused: { text: '暂停中', icon: 'ep:video-pause', color: '#E6A23C' },
  insufficient: { text: '余额不足', icon: 'ep:warning', color: '#F56C6C' }
}

// ========== 标签切换 ==========
const activeTab = ref('manual')

const handleTabChange = async (tabName: string) => {
  if (batchStatus.value === 'running' && tabName === 'manual') {
    try {
      await ElMessageBox.confirm(
        '当前有批量拨号任务运行，是否继续切换？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
    } catch {
      activeTab.value = 'batch'
    }
  }
}

// ========== 手动拨号相关 ==========
const manualForm = ref({
  phone: '',
  displayPhone: '',
  contactName: ''
})

const isDialing = ref(false)
const callDuration = ref(0)
let callTimer: any = null

// 模拟联系人数据
const mockContactMap: Record<string, string> = {
  '13800138000': '张三',
  '13800138001': '李四',
  '13800138002': '王五'
}

const handlePhoneInput = (value: string) => {
  // 只允许输入数字
  manualForm.value.phone = value.replace(/\D/g, '')
  
  // 格式化显示
  if (manualForm.value.phone.length >= 11) {
    const phone = manualForm.value.phone
    manualForm.value.displayPhone = `${phone.slice(0, 3)}****${phone.slice(-4)}`
    
    // 查找联系人
    manualForm.value.contactName = mockContactMap[phone] || ''
  } else {
    manualForm.value.displayPhone = ''
    manualForm.value.contactName = ''
  }
}

const canDial = computed(() => {
  return manualForm.value.phone.length === 11 && accountBalance.value >= 0.3
})

const dialDisabledReason = computed(() => {
  if (accountBalance.value < 0.3) {
    return '账户余额不足，无法拨打'
  }
  return ''
})

const formattedCallDuration = computed(() => {
  const hours = Math.floor(callDuration.value / 3600)
  const minutes = Math.floor((callDuration.value % 3600) / 60)
  const seconds = callDuration.value % 60
  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
})

const handleManualDial = () => {
  if (!isDialing.value) {
    // 开始拨号
    isDialing.value = true
    currentStatus.value = 'dialing'
    callDuration.value = 0
    
    // 模拟拨号过程
    setTimeout(() => {
      currentStatus.value = 'calling'
      // 开始计时
      callTimer = setInterval(() => {
        callDuration.value++
      }, 1000)
      ElMessage.success('通话已接通')
    }, 2000)
  } else {
    // 挂断
    isDialing.value = false
    currentStatus.value = 'idle'
    if (callTimer) {
      clearInterval(callTimer)
      callTimer = null
    }
    
    // 更新统计数据
    todayStats.value.total++
    todayStats.value.connected++
    todayStats.value.rate = Number(((todayStats.value.connected / todayStats.value.total) * 100).toFixed(1))
    
    // 扣费（模拟）
    const cost = Math.ceil(callDuration.value / 60) * 0.1
    accountBalance.value = Number((accountBalance.value - cost).toFixed(2))
    
    ElMessage.info(`通话已结束，通话时长：${formattedCallDuration.value}`)
    callDuration.value = 0
  }
}

const handleRecharge = () => {
  ElMessage.info('跳转至充值页面')
}

// ========== 批量拨号相关 ==========
interface Contact {
  id: number
  name: string
  phone: string
}

// 模拟联系人列表
const contactList = ref<Contact[]>([
  { id: 1, name: '张三', phone: '138****1234' },
  { id: 2, name: '李四', phone: '139****5678' },
  { id: 3, name: '王五', phone: '136****9012' },
  { id: 4, name: '赵六', phone: '137****3456' },
  { id: 5, name: '孙七', phone: '135****7890' },
  { id: 6, name: '周八', phone: '134****2345' },
  { id: 7, name: '吴九', phone: '133****6789' },
  { id: 8, name: '郑十', phone: '132****0123' },
  { id: 9, name: '钱十一', phone: '131****4567' },
  { id: 10, name: '陈十二', phone: '130****8901' }
])

const contactSearchKeyword = ref('')
const selectedContacts = ref<number[]>([])
const selectAllContacts = ref(false)

const filteredContacts = computed(() => {
  if (!contactSearchKeyword.value) {
    return contactList.value
  }
  const keyword = contactSearchKeyword.value.toLowerCase()
  return contactList.value.filter(
    contact =>
      contact.name.toLowerCase().includes(keyword) ||
      contact.phone.includes(keyword)
  )
})

const isIndeterminate = computed(() => {
  const selectedCount = selectedContacts.value.length
  return selectedCount > 0 && selectedCount < filteredContacts.value.length
})

const handleSelectAll = (val: boolean) => {
  if (val) {
    selectedContacts.value = filteredContacts.value.map(c => c.id)
  } else {
    selectedContacts.value = []
  }
}

watch(selectedContacts, (val) => {
  selectAllContacts.value = val.length === filteredContacts.value.length && val.length > 0
})

// 批量拨号状态
type BatchStatus = 'idle' | 'running' | 'paused'
const batchStatus = ref<BatchStatus>('idle')
const batchForm = ref({
  interval: 30,
  totalCount: 0,
  dialedCount: 0,
  currentContact: null as Contact | null
})

let batchTimer: any = null
let batchContactQueue: Contact[] = []

const batchProgress = computed(() => {
  if (batchForm.value.totalCount === 0) return 0
  return Number(((batchForm.value.dialedCount / batchForm.value.totalCount) * 100).toFixed(1))
})

const handleBatchStart = async () => {
  if (selectedContacts.value.length === 0) {
    ElMessage.warning('请先选择联系人')
    return
  }

  try {
    await ElMessageBox.confirm(
      `即将开始批量拨号，共 ${selectedContacts.value.length} 个联系人，预估费用 ¥${(selectedContacts.value.length * 0.3).toFixed(2)}`,
      '确认开始',
      {
        confirmButtonText: '开始',
        cancelButtonText: '取消',
        type: 'info'
      }
    )

    batchStatus.value = 'running'
    currentStatus.value = 'dialing'
    batchForm.value.totalCount = selectedContacts.value.length
    batchForm.value.dialedCount = 0
    
    // 构建拨号队列
    batchContactQueue = selectedContacts.value.map(id => 
      contactList.value.find(c => c.id === id)!
    )
    
    // 开始拨号
    dialNextContact()
    ElMessage.success('批量拨号已开始')
  } catch {
    // 取消
  }
}

const dialNextContact = () => {
  if (batchContactQueue.length === 0 || batchStatus.value !== 'running') {
    // 全部拨号完成
    if (batchStatus.value === 'running') {
      batchStatus.value = 'idle'
      currentStatus.value = 'idle'
      ElMessage.success(`批量拨号完成！共拨号 ${batchForm.value.dialedCount} 个联系人`)
      resetBatchForm()
    }
    return
  }

  const contact = batchContactQueue.shift()!
  batchForm.value.currentContact = contact
  
  // 模拟拨号
  setTimeout(() => {
    batchForm.value.dialedCount++
    
    // 模拟接通结果（70%接通率）
    const isConnected = Math.random() < 0.7
    if (isConnected) {
      todayStats.value.connected++
    }
    todayStats.value.total++
    todayStats.value.rate = Number(((todayStats.value.connected / todayStats.value.total) * 100).toFixed(1))
    
    // 扣费
    accountBalance.value = Number((accountBalance.value - 0.3).toFixed(2))
    
    // 继续下一个
    batchTimer = setTimeout(() => {
      dialNextContact()
    }, batchForm.value.interval * 1000)
  }, 2000)
}

const handleBatchPause = () => {
  batchStatus.value = 'paused'
  currentStatus.value = 'paused'
  if (batchTimer) {
    clearTimeout(batchTimer)
    batchTimer = null
  }
  ElMessage.warning('批量拨号已暂停')
}

const handleBatchResume = () => {
  batchStatus.value = 'running'
  currentStatus.value = 'dialing'
  dialNextContact()
  ElMessage.success('批量拨号已继续')
}

const handleBatchStop = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要终止批量拨号吗？已拨号的通话不受影响',
      '确认终止',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    batchStatus.value = 'idle'
    currentStatus.value = 'idle'
    if (batchTimer) {
      clearTimeout(batchTimer)
      batchTimer = null
    }
    batchContactQueue = []
    ElMessage.info('批量拨号已终止')
    resetBatchForm()
  } catch {
    // 取消
  }
}

const resetBatchForm = () => {
  batchForm.value = {
    interval: 30,
    totalCount: 0,
    dialedCount: 0,
    currentContact: null
  }
}
</script>

<style scoped lang="scss">
.status-item {
  padding: 10px 0;

  .status-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #606266;
    margin-bottom: 8px;
  }

  .status-value {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
  }

  .status-warning {
    color: #f56c6c;
    font-size: 12px;
    margin-top: 4px;
  }

  .status-stats {
    font-size: 14px;
    color: #606266;
    margin-top: 4px;

    strong {
      font-size: 18px;
      color: #303133;
    }
  }
}

.manual-dial-container {
  padding: 20px 0;

  .call-duration {
    font-size: 32px;
    font-weight: bold;
    color: #67c23a;
    font-family: 'Courier New', monospace;
  }
}

.batch-dial-container {
  padding: 20px 0;

  // 左侧联系人选择区域
  .contact-select-wrapper {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .section-title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 600;
        color: #303133;
      }

      .search-input {
        width: 220px;
      }
    }

    .contact-stats {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
      border-radius: 8px;
      margin-bottom: 16px;

      .select-all-checkbox {
        font-weight: 500;
      }

      .selected-count {
        display: flex;
        align-items: center;
        font-size: 14px;

        .count-label {
          color: #606266;
        }

        .count-value {
          font-size: 20px;
          font-weight: bold;
          color: #409eff;
          margin: 0 4px;
        }

        .count-unit {
          color: #909399;
        }
      }
    }

    .contact-list-container {
      .contact-checkbox-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .contact-card {
        background: #fff;
        border: 2px solid #e4e7ed;
        border-radius: 8px;
        padding: 12px;
        transition: all 0.3s ease;
        cursor: pointer;

        &:hover {
          border-color: #409eff;
          box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
          transform: translateY(-2px);
        }

        &.contact-card-selected {
          border-color: #409eff;
          background: linear-gradient(135deg, #ecf5ff 0%, #f0f9ff 100%);
        }

        .contact-checkbox {
          width: 100%;

          :deep(.el-checkbox__label) {
            width: 100%;
          }
        }

        .contact-detail {
          display: flex;
          align-items: center;
          margin-left: 8px;

          .contact-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 20px;
            margin-right: 12px;
            flex-shrink: 0;
          }

          .contact-text {
            flex: 1;
            min-width: 0;

            .contact-name {
              font-size: 15px;
              font-weight: 500;
              color: #303133;
              margin-bottom: 6px;
            }

            .contact-phone {
              display: flex;
              align-items: center;
              font-size: 13px;
              color: #909399;

              .phone-icon {
                margin-right: 4px;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }

  // 右侧批量拨号控制区域
  .batch-control-wrapper {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
    min-height: 600px;

    .section-header {
      .section-title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 600;
        color: #303133;
      }
    }

    .control-section {
      margin-bottom: 24px;

      .control-label {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 500;
        color: #606266;
        margin-bottom: 12px;
      }

      .option-desc {
        margin-left: 8px;
        color: #909399;
        font-size: 12px;
      }
    }

    // 统计卡片
    .stats-cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;

      .stat-card {
        background: #fff;
        border: 1px solid #e4e7ed;
        border-radius: 12px;
        padding: 16px;
        display: flex;
        align-items: center;
        transition: all 0.3s ease;

        &:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          transform: translateY(-2px);
        }

        .stat-icon {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 24px;
          margin-right: 12px;
        }

        .stat-content {
          flex: 1;

          .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
            line-height: 1.2;
          }

          .stat-label {
            font-size: 12px;
            color: #909399;
            margin-top: 4px;
          }
        }
      }
    }

    // 进度区域
    .progress-section {
      background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
      border-radius: 12px;
      padding: 20px;

      .progress-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        .progress-title {
          font-size: 14px;
          font-weight: 500;
          color: #303133;
        }

        .progress-count {
          font-size: 14px;
          font-weight: bold;
          color: #409eff;
        }
      }

      .current-calling {
        display: flex;
        align-items: center;
        margin-top: 16px;
        padding: 12px;
        background: #fff;
        border-radius: 8px;
        border-left: 4px solid #67c23a;

        .calling-icon {
          font-size: 20px;
          color: #67c23a;
          margin-right: 8px;
        }

        .calling-text {
          font-size: 14px;
          color: #606266;

          strong {
            color: #303133;
            margin: 0 4px;
          }

          .calling-phone {
            color: #909399;
            margin-left: 8px;
          }
        }
      }
    }

    // 操作按钮
    .action-buttons {
      display: flex;
      flex-direction: column;
      gap: 12px;

      .action-btn {
        width: 100%;
        height: 48px;
        font-size: 16px;
        font-weight: 500;
        border-radius: 8px;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        &.start-btn {
          background: linear-gradient(135deg, #67c23a 0%, #5daf34 100%);
          border: none;

          &:hover {
            background: linear-gradient(135deg, #5daf34 0%, #529b2e 100%);
          }
        }

        &.stop-btn {
          background: linear-gradient(135deg, #f56c6c 0%, #f04c4c 100%);
          border: none;

          &:hover {
            background: linear-gradient(135deg, #f04c4c 0%, #dd3c3c 100%);
          }
        }
      }
    }

    // 提示信息
    .tip-message {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      border-radius: 8px;
      font-size: 14px;
      margin-top: 16px;

      &.error-tip {
        background: #fef0f0;
        color: #f56c6c;
        border: 1px solid #fde2e2;
      }

      &.success-tip {
        background: #f0f9ff;
        color: #67c23a;
        border: 1px solid #c6f1d6;
      }
    }
  }
}

// 动画
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style>
